<template>
     <div class="tab-Control">
        <div v-for="(item,index) in titles" class="tab-control-item"
             :class="{active: index===currentIndex}" @click="itemClick(index)">
          <span class="span">{{item}}</span>
        </div>
     </div>
</template>

<script>
export default {
  name: "TabControl",
  props:{
    titles:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data(){
    return {
      currentIndex:0
    }
  },
  methods:{
    itemClick(index){
      this.currentIndex=index;
      this.$emit("tabclick",index)
    }
  }
}
</script>

<style scoped>
      .tab-Control{
        display:flex;
        background-color: #fff;
      }
     .tab-control-item{
       flex:1;
       text-align:center;
       font-size:15px;
       height:40px;
       line-height:40px;
     }
     .span{
       padding:5px;
     }
     .active{
       color:var(--color-high-text);
     }
     .active span{
       border-bottom:3px solid var(--color-tint);
     }
</style>
